<template>
  <view class="container">
    <view class="swpier-box">
      <swiper
        class="swiper"
        :current="currentSwiper"
        :autoplay="true"
        @change="onChangeSwiper"
      >
        <swiper-item v-for="(item, index) in swipers" :key="index">
          <view
            class="swiper-item"
            :style="{ backgroundImage: `url(${item})` }"
            @click="onClickSwipe(item, index)"
          >
          </view>
        </swiper-item>
      </swiper>

      <view class="dots">
        <view
          class="dot"
          :class="{ active: currentSwiper === index }"
          v-for="(item, index) in swipers"
          :key="index"
        ></view>
      </view>
      <view class="tag"
        ><image class="img" :src="imgBaseUrlV2 + 'anli_pic.png'" />{{
          swipers.length
        }}</view
      >
    </view>

    <view class="title">
      {{ dataInfo.title }}
    </view>

    <view class="form-item">
      <view class="label">服务用时：</view>
      <view class="value"> {{ dataInfo.service_time }}</view>
    </view>
    <view class="form-item">
      <view class="label">服务项目：</view>
      <view class="value"> {{ dataInfo.service_project }}</view>
    </view>
    <view class="form-item">
      <view class="label">服务内容：</view>
      <view class="value">
        <rich-text :nodes="dataInfo.content"></rich-text>
      </view>
    </view>
    <view class="form-item">
      <view class="label">现场情况：</view>
      <view class="value">
        <Upload
          :imgList="dataInfo.img_url"
          :edit="false"
          :uploadWidth="170"
          :uploadHeight="170"
          :line="3"
        ></Upload>
      </view>
    </view>
    <view class="form-item">
      <view class="label">服务评价：</view>
      <view class="value">
        <rich-text :nodes="dataInfo.comment"></rich-text>
      </view>
    </view>

    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
import Upload from "@/components/public/upload";
import { stringToJSON } from "@/utils";
export default {
  mixins: [detailModule],
  components: {
    Upload,
  },
  data() {
    return {
      imgBaseUrlV2,
      currentSwiper: 0,
      swipers: [],
      mixinViewOptions: {
        getURL: "/getServiceCaseDetail",
        isPage: true,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: false,
      },
      dataInfo: {},
    };
  },
  methods: {
    fetchComplete(err, data = {}, res) {
      if (err) {
        this.message.error(res.message || "获取详情失败,请稍后重试!");
        return;
      }
      let content = data.content || "";
      data.content = content
        .split("\n")
        .reduce((total, cur) => (total += `<p>${cur}</p>`));
      let comment = data.comment || "";
      data.comment = comment
        .split("\n")
        .reduce((total, cur) => (total += `<p>${cur}</p>`));
      data.img_url = stringToJSON(data.img_url);
      this.swipers = data.img_url.map((i) => i.url || i);
      data.service_project = this.$getDictLabel(
        "service_project",
        data.service_project
      );
    },
    onChangeSwiper(e) {
      let current = e.detail.current;
      this.currentSwiper = current;
    },
    onClickSwipe(item) {
      uni.previewImage({
        current: item,
        urls: this.swipers,
      });
    },
  },
  onLoad(q) {
    this.dataForm.id = q.id;
    if (!q.id) {
      return this.message.error("非法参数");
    }
    this.getDataInfo();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/base';

.container {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  color:#fff;
}

.swpier-box {
  position: relative;
  padding: 24rpx;

  .dots {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 44rpx;
    width: 100%;
    left: 0;

    >.dot {
      width: 10rpx;
      height: 10rpx;
      border-radius: 10rpx;
      background: #fff;
      margin-right: 14rpx;
      transition: all 0.3s;

      &.active {
        width: 20rpx;
        border-radius: 6rpx;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .swiper {
    height: 320rpx;

    .swiper-item {
      width: 100%;
      height: 100%;
      background-size: cover;
      border-radius: 10rpx;
    }
  }

  .tag {
    position: absolute;
    display: flex;
    align-items: center;
    right: 60rpx;
    bottom: 58rpx;
    background: rgba(0, 0, 0, 0.3);
    height: 40rpx;
    min-width: 100rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 30rpx;
    padding: 0 18rpx;

    >.img {
      display: block;
      width: 30rpx;
      height: 30rpx;
      margin-right: 14rpx;
    }
  }
}

.title {
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color:color-white;
  padding: 16rpx 24rpx 16rpx;
}

.form-item {
  display: flex;
  font-size: 28rpx;
  line-height: 42rpx;
  padding: 10rpx 24rpx;
  color: color-white;

  >.label {
    flex: 0 0 5em;
    border: none;
    font-size: 28rpx;
    line-height: 42rpx;
    padding: 0;
    color: color-white;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
  }

  >.value {
    flex: 1;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
}
</style>